<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example</title>
  <style>
  pre {
    border: medium double black;
  }

  img {
    width: 200px;
  }
  </style>
</head>

<body>
  <pre id="results"></pre>
  <img id="apple" name="apple" class="fruits" src="banana.jpg">
  <p>There are lots of different kinds of fruit - there are over 500 varieties of banana alone.</p>
  <p>One of the most interesting aspects of fruit is the variety available in each country.</p>
  <img id="banana" class="fruits" src="banana.jpg" alt="banana">
  <script>
  var resultsElement = document.getElementById("results");

  var elems = document.querySelectorAll("p, img#apple");
  resultsElement.innerHTML += "There selector matched " + elems.length + " elements\n";
  </script>
</body>

</html>
